<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item prop="productname">
          <el-input v-model="filters.productname" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item prop="skunumber">
          <el-input v-model="filters.skunumber" placeholder="SKU编码"></el-input>
        </el-form-item>
        <el-form-item prop="recommend">
          <el-select v-model="filters.recommend" placeholder="是否推荐">
            <el-option
              v-for="item in recommends"
              :key="item.vaue"
              :label="item.label"
              :value="item.vaue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="status">
          <el-select v-model="filters.status" placeholder="可用状态">
            <el-option
              v-for="item in statusOption"
              :key="item.status"
              :label="item.label"
              :value="item.status"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="minexchangepoints">
          <el-input v-model="filters.minexchangepoints" placeholder="积分区间启"></el-input>
        </el-form-item>
        <el-form-item prop="maxexchangepoints">
          <el-input v-model="filters.maxexchangepoints" placeholder="积分区间止"></el-input>
        </el-form-item>
        <el-row>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-plus"
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              label="模板下载"
              icon="el-icon-document"
              type="primary"
              @click="downloadTemplete"
            />
          </el-form-item>
          <el-form-item>
            <el-upload
              class="avatar-uploader"
              :action="excelUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            >
              <el-button icon="el-icon-document-add" size="small" type="primary">模板导入</el-button>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showEditOperation="false"
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @selectionChange="selectionChange"
      ref="CyTable"
    ></cy-table>
    <!--新增编辑界面-->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="60%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >

      <el-table
        ref="multipleTable"
        style="width: 100%"
        :close-on-click-modal="true"
        :data="tableData"
        :columns="filterColumns"
        @selectionChange2="selectionChange2"
        @closed="closeDetail"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed prop="skunumber" label="SKU编码" width="150"></el-table-column>
        <el-table-column prop="productname" label="商品名称" width="150"></el-table-column>
        <el-table-column prop="specs" label="规格" width="150"></el-table-column>
        <el-table-column prop="type" label="分类" width="150"></el-table-column>
        <el-table-column prop="brand" label="品牌" width="150"></el-table-column>
        <el-table-column prop="price" label="单价" width="150"></el-table-column>
        <el-table-column prop="shopname" label="店铺名称" width="150"></el-table-column>
      </el-table>

      <!--分页栏-->
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          @size-change="handleSizeChange"
          :current-page="pageRequest.pageNum"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"
        ></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      filters: {
        productname: "",
        recommend: "",
        skunumber: "",
        minexchangepoints: "",
        maxexchangepoints: "",
        status: "",
        type: "",
        t: "productIntegrals"
      },
      excelUpload: this.utils.getHost() +"/com/ajaxTractorUpload?token=" +localStorage.getItem("token"),
      recommends: [{vaue: "",label: "请选择"},{vaue: "是",label: "是"},{vaue: "否",label: "否"}],
      statusOption: [{ status: "",label: "请选择"},{status: "停用",label: "停用"},{status: "启用",label: "启用"}],
      columns: [
        { prop: "productname", label: "商品名称", minWidth: 150 },
        { prop: "skunumber", label: "SKU编码", minWidth: 100 },
        { prop: "specs", label: "规格", minWidth: 100 },
        { prop: "marketprice", label: "市场价", minWidth: 80 },
        { prop: "payprice", label: "结算价", minWidth: 120 },
        { prop: "type", label: "分类", minWidth: 100 },
        { prop: "recommend", label: "推荐", minWidth: 100 },
        { prop: "surplusstock", label: "剩余库存", minWidth: 100 },
        { prop: "exchangepoints", label: "兑换积分", minWidth: 100 },
        { prop: "exchangetime", label: "兑换时间", minWidth: 130 },
        { prop: "status", label: "活动状态", minWidth: 100 },
        { prop: "isok", label: "启用/停用", minWidth: 100 }
      ],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},

      tableData: [{'skunumber':'8341123902','productname':'云端沙发组合','specs':'家居四件套','type':'家居','brand':'居然之家','price':'￥2918','shopname':'居然之家'},
      {'skunumber':'8566534205','productname':'小动物全棉针织宝宝鞋','specs':'-','type':'家居','brand':'居然之家','price':'￥106','shopname':'居然之家'},
      {'skunumber':'8122802331','productname':'每日坚果','specs':'50g*12','type':'坚果','brand':'三只松鼠','price':'￥58','shopname':'三只松鼠旗舰店'}],
      detailParam: {},
      totalSize:3,
      operation: false, // true:新增, false:编辑
      editDialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      dataFormRules: {
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        CarouselFigurePic: [
          { required: true, message: "请上传轮播图", trigger: "blur" }
        ],
        config_id: [{ required: true, message: "请选择类型", trigger: "blur" }],
        status: [
          { required: true, message: "请输入选择是否可用", trigger: "blur" }
        ]
      },
      //选中ID Array
      idArray: []
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      this.$refs.CyTable.findPage(this.filters);
    },
    showPicType(row, column, cellValue, index) {
      if (row.pic != "" && row.pic != null) {
        return '<img src="' + row.pic + '" style="width: 150px;"></img>';
      }
    },
    showStatusType(row, column, cellValue, index) {
      if (row.status == "N") {
        return "可用";
      } else if (row.status == "Y") {
        return "不可用";
      }
    },
    selectionChange(data) {
      console.log(data);
      this.idArray = data.selections;
    },
    // 选择切换
    selectionChange2: function(selections) {
      this.selections = selections;
      console.log(selections);
    },
    closeDetail: function(params) {
      this.content = "";
    },
  // 换页刷新
    refreshPageRequest: function(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.handleDetail();
    },
    // 换页刷新
    handleSizeChange: function(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.pageRequest.pageNum = 1;
      this.handleDetail();
    },
    downloadTemplete() {
      var a = document.createElement("a");
      a.href =
        "/static/excels/puoductExcel.xls";
      a.download = "积分商品模板.xls";
      a.click();
    },
    // 批量删除
    handleDelete: function(data) {
      if (data != null && data.params != null && data.params.length > 0) {
        let ids = data.params.map(item => item.id).toString();

        var params = {};
        params.t = "productIntegrals";
        params.ids = ids;
        var this_ = this;
        this.utils.request.deleteUserInfo(params, function(res) {
          if (res.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.findPage(null);
          } else {
            this_.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
        });
      }
    },
    // 显示新增界面
    handleAdd: function() {
      this.editDialogVisible = true;
      this.operation = true;
       this.detailParam.t = "productIntegrals";
        this.dialogVisible = true;
        let this_ = this;

        // this.utils.request.queryUserList(this.detailParam, function(data) {
        //     this_.tableData = data.data;
        //     this_.totalSize = Number(data.data.length);
        // });
    },
    // 显示编辑界面
    handleEdit: function(params) {
      this.editDialogVisible = true;
      this.operation = false;
      this.$nextTick(function() {
        this.dataForm = Object.assign({}, params.row);
      });
    },
    handleAvatarSuccess(res, file) {
      let fileUrl = URL.createObjectURL(file.raw);
      if (res.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
        this.findPage();
      } else {
        this.$message({ message: "导入失败", type: "error" });
      }
    },
    beforeAvatarUpload(file) {
      console.log(file);
      return true;
    },
    // 编辑
    submitForm: function() {
        this.$message({ message: "操作成功", type: "success" });
        this.editDialogVisible = false;
        this.findPage(null);
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.findPage(null);
      }
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      var temp = [];

      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "积分商城下载";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.initColumns();
  }
};
</script>

<style scoped>
.el-icon-plus {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-icon-plus .el-upload:hover  {
  border-color: #2F4554;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px !important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
